<template>
  <div ref="box">

  <!-- 圈子编辑 -->
    <createCircle ref="createCircleRef" :circleInfo="circleItem"></createCircle>

    <div
      class="list"
      :style="{
        'grid-template-columns': `repeat(auto-fill, ${columnWidth})`,
        'padding-top': pt + 'px',
      }"
      v-if="list.length"
    >
      <div
        class="listitem"
        v-for="(item, index) in list"
        :key="index"
        @click="toCircleDetail(item)"
      >
        <div class="itemtop">
          <img :src="item.background_maps" alt="" />
        </div>
        <div class="listbpx">
          <div class="avatar f-j-a-c">
            <img :src="item.head_portrait" alt="" />
          </div>
          <div class="title f-d-c f-j-a-c">
            <span>{{ item.circle_name }}</span>
            <span class="ellipsis2">{{ item.circle_introduce }}</span>
          </div>
          <div class="item_list">
            <div class="type f-a-c f-j-sb-a-c">
              <div class="typelist f-d-c f-j-a-c">
                <span v-if="ids == 0">{{ item.posts_count || item.circle_posts_count || item.post_count }}</span>
                <span>笔记</span>
              </div>
              <div class="line"></div>
              <div class="typelist f-d-c f-j-a-c">
                <span v-if="ids == 0">{{ item.user_circle_count || item.circle_follow_count }}</span>
                <span>讨论</span>
              </div>
            </div>
          </div>
          <div
            v-if="!item.is_created"
            class="joinbutton click f-j-a-c"
            :class="item.is_follow_circle ? 'canjoin' : ''"
            @click.stop="joincommunity(item)"
          >
            {{ item.is_follow_circle ? "已加入" : "加入圈子" }}
          </div>

          <div
            v-else
            class="joinbutton click f-j-a-c"
            @click.stop="setCircle(item)"
          >
            编辑圈子
          </div>
        </div>
      </div>
    </div>

    <!-- 无数据展示 -->
    <div class="no-data-box" v-if="!list.length">
      <noData></noData>
    </div>
  </div>
</template>
<script>
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import {
  defineComponent,
  reactive,
  toRefs,
  onUnmounted,
  onMounted,
  computed,
  getCurrentInstance,
  ref,
} from "vue";

import createCircle from "@/views/community/components/createCircle.vue"

import {
  Mycircle,
  nearlyAndfollows,
  byplateid,
  foucecircle,
  search,
  options,
} from "@/axios/community.js";
import { ElMessage } from "element-plus";
export default defineComponent({
  components:{
    createCircle
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    }, //列表数据
    rowNum: {
      type: Number,
      default: 3,
    },
    space: {
      type: Number,
      default: 10,
    }, //卡片两边间距
    ids: {
      type: [Number, String],
      default: 0,
    }, //0 全部  1我加入/我创建的
    pt: {
      type: Number,
      default: 0,
    }, //列表距离顶部距离
  },
  setup(props, { attrs, slots, emit }) {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    const store = useStore();
    const box = ref(null);
    const createCircleRef = ref(null);

    let data = reactive({
      columnWidth: "328px",
      timer: null,
      circleItem:{}, //当前选中圈子
    });

    // 前往圈子详情
    let toCircleDetail = (item) => {
      router.push({
        path: "/pages/circle/list",
        query: {
          id: item.id,
        },
      });
    };

    // 加入圈子
    let joincommunity = (item) => {
      foucecircle({ circle_id: item.id }).then((res) => {
        if (!item.is_follow_circle) {
          item.is_follow_circle = true;
          ElMessage.success("加入成功");
        } else {
          item.is_follow_circle = false;
          ElMessage.success("退出成功");
        }
      });
    };

    // 修改卡片宽度
    let setColumnWidth = () => {
      let boxWidth = box.value.offsetWidth;
      let spaceAllWidth = (props.rowNum - 1) * props.space;
      let columnWidth = (boxWidth - spaceAllWidth) / props.rowNum;
      if (columnWidth < 260) {
        data.columnWidth = "260px";
      } else if (columnWidth > 328) {
        data.columnWidth = "328px";
      } else {
        data.columnWidth = columnWidth + "px";
      }
      //   console.log("变化")
    };


    // 编辑圈子按钮
    let setCircle = (item)=>{
      data.circleItem = item;
      createCircleRef.value.open();
    };


    onMounted(() => {
      setColumnWidth();
      //   监听浏览器尺寸变化
      window.onresize = () => {
        clearTimeout(data.timer);
        data.timer = setTimeout(() => {
          setColumnWidth();
        }, 500);
      };
    });

    onUnmounted(() => {
      window.onresize = null;
    });

    return {
      createCircleRef,
      setCircle,
      toCircleDetail,
      joincommunity,
      box,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.list {
  padding-top: 10px;
  width: 100%;
  display: grid;
  grid-gap: 10px;
  .listitem {
    padding-bottom: 20px;
    background: #ffffff;
    border-radius: 20px 20px 20px 20px;
    opacity: 1;
    border-radius: 20px;
    cursor: pointer;
    .itemtop {
      width: 100%;
      height: 150px;
      > img {
        object-fit: cover;
        border-radius: 20px 20px 0 0;

        width: 100%;
        height: 100%;
      }
    }
    .avatar {
      margin-top: -30px;

      > img {
        border-radius: 50%;
        width: 60px;
        height: 60px;
        opacity: 1;
        border: 2px solid #ffffff;
      }
    }
    .title {
      > span {
        margin-top: 10px;
        font-size: 16px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: 700;
        color: #000000;
        &:last-child {
          display: block;
          width: 201px;
          height: 30px;
          text-align: center;
          margin-top: 10px;
          font-size: 12px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #656f79;
        }
      }
    }
    .item_list {
      padding: 0 24px;
      .type {
        margin-top: 24px;
      }
      .typelist {
        > span {
          font-size: 14px;
          font-family: Microsoft YaHei-Bold, Microsoft YaHei;
          font-weight: 700;
          color: #000000;
          &:last-child {
            font-size: 12px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #656f79;
          }
        }
      }
      .line {
        width: 1px;
        height: 15px;
        opacity: 1;
        border: 1px solid #ececec;
      }
    }
    .joinbutton {
      margin: 0 auto;
      margin-top: 22px;
      // width:280px;
      // min-width: 100px;
      // min-width: 280px;
      height: 40px;
      background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
      border-radius: 10px 10px 10px 10px;
      opacity: 1;
      font-size: 14px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: 700;
      color: #ffffff;
    }
    .canjoin {
      background: #f3f4f5 !important;

      color: #656f79;
    }
  }
}

.listbpx {
  padding: 0 24px;
}

.no-data-box {
  background: #ffffff;
  border-radius: 10px;
  margin-right: 10px;
  margin-top: 10px;
}
</style>
